<template>
    <div class="app-container">
        <el-table
            :data="data"
            style="width: 100%;"
            border
            @row-click="showImg"
        >
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="title" label="名称" width="150" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="scanNumber" label="浏览数" align="center"></el-table-column>
            <el-table-column prop="commentNumber" label="评论数" align="center"></el-table-column>
            <el-table-column prop="category.name" label="所属分类" align="center"></el-table-column>
            <el-table-column prop="createDate" label="创建日期" align="center"></el-table-column>
            <el-table-column label="文章头图" width="180" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px;"
                        :src="scope.row.thumb"
                        fit="fill"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editBlog(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="delBlog(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @pre-click="handlePreClick"
            @next-click="handleNextClick"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="eachPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>
</template>

<script>
import { findBlog,delOneBlog } from '@/api/blog'
import { server_URL } from '@/urlConfig'
import { formatDate } from '@/utils/formatDate'

export default {
    name: 'blogList',
    data() {
        return {
            data: [],
            count: 0,
            currentPage: 1,
            eachPage: 10,
            totalPage: 1,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            findBlog(this.currentPage, this.eachPage).then(({ data }) => {
                console.log('文章列表',data)
                this.data = data.rows
                this.count = data.total
                for(let i of this.data) {
                    // i.thumb2 = server_URL + i.thumb
                    i.createDate = formatDate(i.createDate)
                }
                this.totalPage = Math.ceil(this.count / this.eachPage)
                if(this.totalPage < this.currentPage) {
                    this.currentPage = this.totalPage
                    this.fetchData()
                }
            })
        },
        editBlog(row) {
            this.$router.push(`/editBlog/${row.id}`)
        },
        delBlog(row) {
            this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delOneBlog(row.id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },
        handleSizeChange(val) {
            this.eachPage = val
            this.currentPage = 1
            this.fetchData()
        },
        handlePreClick() {
            this.currentPage--
            this.fetchData()
        },
        handleNextClick() {
            this.currentPage++
            this.fetchData()
        },
        showImg(row) {
            //在该行下方显示图片
            this.$alert(`<img src="${row.imgUrl}" style="width:100%;height:100%;">`, '图片', {
                dangerouslyUseHTMLString: true,
                showConfirmButton: false,
                center: true
            })
        }
    }
}
</script>

<style scoped lang="scss">

</style>
